<template>
  <div>
    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column label="注销理由"
                       width="150"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <div slot="reference"
               class="name-wrapper">
            <el-tag size="medium">{{ scope.row.cause }}</el-tag>
            <font v-if="scope.row.audit == 3"
                  color="red">紧急</font>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="注销描述"
                       width="150">
        <template slot-scope="scope">
          <div slot="reference"
               class="name-wrapper">
            <el-tag size="medium">{{ scope.row.describe }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="犬只信息"
                       width="150">
        <template slot-scope="scope">
          <div slot="reference"
               class="name-wrapper">
            <el-tag size="medium">{{ scope.row.pet_id }}</el-tag>
            <el-popover placement="right"
                        width="800"
                        trigger="click">
              <el-button slot="reference"
                         size="mini"
                         type="primary"
                         @click="getUser()">详情</el-button>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="犬主信息"
                       width="150">
        <template slot-scope="scope">
          <div slot="reference"
               class="name-wrapper">
            <el-popover placement="right"
                        width="800"
                        trigger="click">
              <label v-if="user!=null">姓名：{{user.name}}</label> <br />
              <label v-if="user!=null">姓别：{{user.sex}}</label> <br />
              <label v-if="user!=null">年龄：{{user.age}}</label> <br />
              <label v-if="user!=null">证件号：{{user.icd}}</label> <br />
              <label v-if="user!=null">电话：{{user.tel}}</label> <br />
              <label v-if="user!=null">住址：{{user.address}}</label> <br />
              <el-button slot="reference"
                         size="mini"
                         type="primary"
                         @click="getUser(scope.row.u_id)">详情</el-button>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="证明图片"
                       width="150">
        <template slot-scope="scope">
          <div slot="reference"
               class="name-wrapper">
            <div class="demo-image__preview">
              <el-image style="width: 100px; height: 100px"
                        :src="scope.row.prove_image"
                        :preview-src-list="srcList">
              </el-image>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作"
                       width="300">
        <template slot-scope="scope">
          <el-button slot="reference"
                     size="mini"
                     @click="pass(scope.row)"
                     type="primary">通过</el-button>

          <el-popover placement="right"
                      width="800"
                      trigger="click">

            <el-form label-width="80px">
              <el-form-item width=""
                            label="">
                <el-col :span="10">
                  <el-input type="textarea"
                            autosize
                            placeholder="请输入理由"
                            v-model="failure_reason"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item>

                <el-button type="primary"
                           @click="onSubmit(scope.row)"
                           plain>确认</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>

            <el-button slot="reference"
                       size="mini"
                       type="danger">不通过</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import axios from "axios";
import common from "../../../assets/commons"
export default {
  data () {
    return {
      tableData: [],
      srcList: [],
      //传给后端的数据
      cancellation: {},
      failure_reason: "",

      user: null,

    };
  },
  methods: {

    //没有通过
    onSubmit (row) {
      this.cancellation = row;
      this.cancellation.failure_reason = this.failure_reason;
      this.cancellation.reviewer = this.$store.state.person.account;
      this.cancellation.audit = 2;
      axios.post(common.baseUrl + "user/user/manageCancelDog", this.cancellation).then(res => {
        if (res.data.code == 200) {
          alert("审核完成")
          this.getCancelDog();
        } else {
          alert("网络错误,请重新提交");
        }
      })
    },


    //通过
    pass (row) {
      this.cancellation = row;
      this.cancellation.reviewer = this.$store.state.person.account;
      this.cancellation.audit = 1;
      axios.post(common.baseUrl + "user/user/manageCancelDog", this.cancellation).then(res => {
        if (res.data.code == 200) {
          alert("审核完成")
          this.getCancelDog();
        } else {
          alert("网络错误,请重新提交");
        }
      })

    },

    getCancelDog () {
      axios
        .get("http://localhost:9091/user/user/selectCancelDog")
        .then((res) => {
          var arr = [];
          let j = 0;
          this.tableData = res.data;
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].audit == 3) {
              arr[j++] = this.tableData[i]
            }
          }
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].audit == 0) {
              arr[j++] = this.tableData[i]
            }
          }
          this.tableData = []
          this.tableData = arr
          this.tableData.forEach((item) => {
            this.srcList.push(item.prove_image);
          });
        });
    },
    getUser (id) {
      axios.post("http://localhost:9091/user/user/findUser", id,
        {
          headers: {
            'content-type': 'application/json'
          }
        }).then((res) => {
          this.user = res.data;
        });
    },
  },
  mounted () {
    this.getCancelDog();
  },
  computed: {},
};
</script>
<style scoped></style>
